<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--ElementUI CSS-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>登录</title>
</head>
<body>
    <div id="app">
        <el-form label-width="80px">
            <el-form-item label="用户名">
                <el-input v-model="username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="password" type="password" placeholder="请输入密码">
                </el-input>
            </el-form-item>
            <el-row>
                <el-button type="primary" round @click="doLogin()">主要按钮</el-button>
            </el-row>
        </el-form>

    </div>
    <!--import Vue before Element-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    username:"",
                    password:""
                }
            },
            methods:{
                doLogin(){
                    let url = "http://localhost:9000/sso/oauth/token"
                    let params = new URLSearchParams()
                    params.append('username',this.username)
                    params.append('password',this.password)
                    params.append('client_id',"gateway-client")
                    params.append('client_secret',"123456")
                    params.append('grant_type',"password")

                    axios.post(url,params)
                    .then(promise=>{
                        alert("login ok")
                        let result = promise.data
                        console.log("result",result)
                        //将返回的访问令牌存储到本地浏览器本地对象中
                        localStorage.setItem("accessToken",result.access_token)
                        location.href="/resource.html"
                    })
                    .catch(e=>{
                        console.log(e)
                    })
                }

            }
        })

    </script>

</body>
</html>